<template>
    <div id="parts">
        <el-table :data="dataList.slice((currentPage-1)*pagesize,currentPage*pagesize)" stripe border class="table-index" :height="tableHeight" style="width: 100%;" :header-cell-style="getRowClass">
            <el-table-column fixed type="index" label="*" sortable min-width="40"></el-table-column>
            <el-table-column prop="userdeptnameName" label="使用单位名称" sortable min-width="250"></el-table-column>
            <el-table-column prop="machinenameName" label="机器名称" sortable min-width="130"></el-table-column>
            <el-table-column prop="machinetype" label="机器型号" sortable min-width="110"></el-table-column>
            <el-table-column prop="outfactorycode" label="出厂编号" sortable min-width="130"></el-table-column>
            <el-table-column prop="customercode" label="客户自编号" sortable min-width="130"></el-table-column>
            <el-table-column prop="machinestartusetime" label="机器启用时间" sortable min-width="160"></el-table-column>
            <el-table-column fixed="right" label="操作" sortable align="center" width="75">
                <template slot-scope="scope">
                    <el-button @click="updateList(scope.row)" type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="dataList.length"></el-pagination>

        <!-- 详情信息 -->
        <el-dialog :title="dialogTitle" width="85%" top="30px" :visible.sync="isDialog" :close-on-click-modal="false" >
            <el-tabs v-model="activeName" @tab-click="handleClick" style="padding-bottom: 15px;">
                <el-tab-pane label="任务信息" name="1" class="dialog1" :style="dialogHeightPane" >
                    <h3 class="dialog-plate-title"><span>基本信息</span></h3>
                    <el-form :inline="true" class="demo-form-inline" v-model="dialogList" label-position="right" label-width="180px">
                        <el-form-item label="流水号"><el-input v-model="dialogList.taskcode" disabled></el-input></el-form-item>
                        <el-form-item label="使用单位名称"><el-input v-model="dialogList.userdeptnameName"></el-input></el-form-item>
                        <el-form-item label="机器名称"><el-input  v-model="dialogList.machinenameName"></el-input></el-form-item>
                        <el-form-item label="机器型号"><el-input v-model="dialogList.machinetype"></el-input></el-form-item>
                        <el-form-item label="ARM编号"><el-input v-model="dialogList.armcode"></el-input></el-form-item>
                        <el-form-item label="STM32编号"><el-input v-model="dialogList.stmcode"></el-input></el-form-item>
                        <el-form-item label="机器出厂时间"><el-date-picker v-model="dialogList.machineoutfactorytime" format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 200px;"></el-date-picker></el-form-item>
                        <el-form-item label="机器出厂二维码"><el-input v-model="dialogList.machineoutfactoryqrcode"></el-input></el-form-item>
                        <el-form-item label="出厂编号"><el-input v-model="dialogList.outfactorycode"></el-input></el-form-item>
                        <el-form-item label="客户自编号"><el-input v-model="dialogList.customercode"></el-input></el-form-item>
                        <el-form-item label="机器启用时间"><el-date-picker v-model="dialogList.machinestartusetime" format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 200px;"></el-date-picker></el-form-item>
                        <el-form-item label="首次安装交付人员"><el-input v-model="dialogList.setupmachineperson" ></el-input></el-form-item>
                        <el-form-item label="首次操作培训人员"><el-input v-model="dialogList.trainperson" ></el-input></el-form-item>
                        <el-form-item label="创建人"><el-input v-model="dialogList.createpersonName" disabled></el-input></el-form-item>
                        <el-form-item label="创建时间"><el-input v-model="dialogList.createtime" disabled></el-input></el-form-item>
                    </el-form>
                     <div style="text-align: right">
                        <el-button @click="submitList" type="primary">确 定</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane  label="过程状态信息" name="2" :style="dialogHeightPane">
                    <el-button @click="insertProcessStateList" type="primary" size="small">新增</el-button>
                    <el-table :data="processStateData.slice((currentPage-1)*pagesize,currentPage*pagesize)" stripe border class="table-index" :height="dialogTableHeight" style="width: 100%;" :header-cell-style="getRowClass">
                        <el-table-column fixed type="index" label="*" sortable min-width="40"></el-table-column>
                        <el-table-column prop="faultdescription" label="故障现象说明" sortable min-width="150"></el-table-column>
                        <el-table-column prop="faultpartsname" label="可能损坏部件名称" sortable min-width="150"></el-table-column>
                        <el-table-column prop="faulttype" label="故障类型" sortable min-width="100"></el-table-column>
                        <el-table-column prop="operator" label="当时操作人" sortable min-width="110"></el-table-column>
                        <el-table-column prop="machinecollectionnums" label="机器采集次数" sortable min-width="130"></el-table-column>
                        <el-table-column prop="performrepairer" label="维修执行人" sortable min-width="110"></el-table-column>
                        <el-table-column prop="guiderepairer" label="指导维修人" sortable min-width="110"></el-table-column>
                        <el-table-column prop="confirmrepairer" label="维修确认人" sortable min-width="110"></el-table-column>
                        <el-table-column prop="repairstarttime" label="维修开始时间" sortable min-width="160"></el-table-column>
                        <el-table-column prop="repairendtime" label="维修结束时间" sortable min-width="160"></el-table-column>
                        <el-table-column fixed="right" label="操作" sortable align="center" width="75">
                            <template slot-scope="scope">
                                <el-button @click="updateProcessStateList(scope.row)" type="text" size="small">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="processStateData.length"></el-pagination>
                </el-tab-pane>
                <el-tab-pane label="备注记录信息" name="3" :style="dialogHeightPane">
                    <el-button @click="insertNotesRecordList" type="primary" size="small">新增</el-button>
                    <el-table :data="notesRecordData.slice((currentPage-1)*pagesize,currentPage*pagesize)" stripe border class="table-index" :height="dialogTableHeight" style="width: 100%;" :header-cell-style="getRowClass">
                        <el-table-column fixed type="index" label="*" sortable min-width="40"></el-table-column>
                        <el-table-column prop="personName" label="保养人" sortable min-width="110"></el-table-column>
                        <el-table-column prop="type" label="保养类型" sortable min-width="110"></el-table-column>
                        <el-table-column prop="object" label="保养结果" sortable min-width="110"></el-table-column>
                        <el-table-column prop="time" label="保养时间" sortable min-width="160"></el-table-column>
                        <el-table-column prop="content" label="保养说明" sortable min-width="250"></el-table-column>
                        <el-table-column fixed="right" label="操作" sortable align="center" width="75">
                            <template slot-scope="scope">
                                <el-button @click="updateNotesRecordList(scope.row)" type="text" size="small">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="notesRecordData.length"></el-pagination>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>

        <!-- 过程状态信息 -->
        <el-dialog :title="dialogProcessStateTitle" width="900px" center :visible.sync="isProcessStateDialog" :close-on-click-modal="false" style="padding-bottom: 15px;">
            <el-form :inline="true" class="demo-form-inline" v-model="dialogProcessStateList" label-position="right" label-width="180px">
                <el-form-item label="故障现象说明"><el-input v-model="dialogProcessStateList.faultdescription"></el-input></el-form-item>
                <el-form-item label="可能损坏部件名称"><el-input v-model="dialogProcessStateList.faultpartsname"></el-input></el-form-item>
                <el-form-item label="故障类型"><el-input v-model="dialogProcessStateList.faulttype"></el-input></el-form-item>
                <el-form-item label="ARM编号"><el-input v-model="dialogProcessStateList.armcode"></el-input></el-form-item>
                <el-form-item label="STM32编号"><el-input v-model="dialogProcessStateList.stmcode"></el-input></el-form-item>
                <el-form-item label="当时操作人"><el-input v-model="dialogProcessStateList.operator"></el-input></el-form-item>
                <el-form-item label="保修人"><el-input v-model="dialogProcessStateList.repairerName" disabled></el-input></el-form-item>
                <el-form-item label="保修发生时间"><el-date-picker v-model="dialogProcessStateList.repairtime" format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 200px;"></el-date-picker></el-form-item>
                <el-form-item label="保修创建时间"><el-input v-model="dialogProcessStateList.repaircreatetime" disabled></el-input></el-form-item>
                <el-form-item label="机器采集次数"><el-input v-model="dialogProcessStateList.machinecollectionnums"></el-input></el-form-item>
                <el-form-item label="维修执行人"><el-input v-model="dialogProcessStateList.performrepairer"></el-input></el-form-item>
                <el-form-item label="指导维修人"><el-input v-model="dialogProcessStateList.guiderepairer"></el-input></el-form-item>
                <el-form-item label="维修确认人"><el-input v-model="dialogProcessStateList.confirmrepairer"></el-input></el-form-item>
                <el-form-item label="更换部件名称1"><el-input v-model="dialogProcessStateList.replaceparts1"></el-input></el-form-item>
                <el-form-item label="二维码"><el-input v-model="dialogProcessStateList.qrcode1"></el-input></el-form-item>
                <el-form-item label="更换部件名称2"><el-input v-model="dialogProcessStateList.replaceparts2"></el-input></el-form-item>
                <el-form-item label="二维码"><el-input v-model="dialogProcessStateList.qrcode2"></el-input></el-form-item>
                <el-form-item label="更换部件名称3"><el-input v-model="dialogProcessStateList.replaceparts3"></el-input></el-form-item>
                <el-form-item label="二维码"><el-input v-model="dialogProcessStateList.qrcode3"></el-input></el-form-item>
                <el-form-item label="维修开始时间"><el-date-picker v-model="dialogProcessStateList.repairstarttime" format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 200px;"></el-date-picker></el-form-item>
                <el-form-item label="维修结束时间"><el-date-picker v-model="dialogProcessStateList.repairendtime" format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 200px;"></el-date-picker></el-form-item>
                <el-form-item label="维修创建时间"><el-input v-model="dialogProcessStateList.createtime" disabled></el-input></el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: right;">
                <el-button @click="submitProcessStateList" type="primary">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 备注记录信息 -->
        <el-dialog :title="dialogNotesRecordTitle" width="600px" center :visible.sync="isNotesRecordDialog" :close-on-click-modal="false" style="padding-bottom: 15px;">
            <el-form :inline="true" class="demo-form-inline" v-model="dialogNotesRecordList" label-position="right" label-width="180px">
                <el-form-item label="保养人"><el-input v-model="dialogNotesRecordList.personName" disabled></el-input></el-form-item>
                <el-form-item label="保养时间"><el-input v-model="dialogNotesRecordList.time" disabled></el-input></el-form-item>
                <el-form-item label="保养类型"><el-input v-model="dialogNotesRecordList.type" ></el-input></el-form-item>
                <el-form-item label="保养结果"><el-input v-model="dialogNotesRecordList.object"></el-input></el-form-item>
                <el-form-item label="保养说明"><el-input type="textarea" :rows="8"  v-model="dialogNotesRecordList.content" style="width: 355px;"></el-input></el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: right;">
                <el-button @click="submitNotesRecordList" type="primary">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "",
        data() {
            let token = sessionStorage.getItem("tokenId");
            let menuId = sessionStorage.getItem('menuId');
            return {
                tokenId: token,
                menuId:menuId,
                currentPage: 1,
                pagesize: 10,
                activeName: '1',
                materialManagers:[],
                tableHeight: document.documentElement.clientHeight - 135,
                dataList: [],

                //基本信息
                isDialog: false,
                dialogTitle: '',
                dialogHeightPane: {
                    height: (document.documentElement.clientHeight - 180) + 'px',
                    overflowY: 'auto'
                },
                dialogTableHeight: document.documentElement.clientHeight - 260,
                dialogList:{
                    armcode: "",
                    confirmrepairer: "",
                    createtime: "",
                    did: "",
                    faultdescription: "",
                    faultpartsname: "",
                    faulttype: "",
                    guiderepairer:'',
                    machinecollectionnums:'',
                    operator:'',
                    performrepairer:'',
                    qrcode1:'',
                    qrcode2:'',
                    qrcode3:'',
                    repaircreatetime:'',
                    repairendtime:'',
                    repairer:'',
                    repairerName:'',
                    repairstarttime:'',
                    repairtime:'',
                    replaceparts1:'',
                    replaceparts2:'',
                    replaceparts3:'',
                    stmcode:'',
                    tid: '',
                },

                //过程状态信息
                isProcessStateDialog: false,
                dialogProcessStateTitle: '',
                dialogProcessStateList:{
                    armcode: '',
                    confirmrepairer: '',
                    createtime: '',
                    did: '',
                    faultdescription: '',
                    faultpartsname: '',
                    faulttype: '',
                    guiderepairer: '',
                    machinecollectionnums: '',
                    operator: '',
                    performrepairer: '',
                    qrcode1: '',
                    qrcode2: '',
                    qrcode3: '',
                    repaircreatetime: '',
                    repairendtime: '',
                    repairer: '',
                    repairerName: '',
                    repairstarttime: '',
                    repairtime: '',
                    replaceparts1: '',
                    replaceparts2: '',
                    replaceparts3: '',
                    stmcode: '',
                    tid: '',
                },
                processStateData:[],
                customerData:[],

                //备注记录信息
                dialogNotesRecordURL: {
                    getURL: '/api/adscm/operation/jqwbMachinemaintenanceinfo/selectByTid/',
                    insertURL: '/api/adscm/operation/jqwbMachinemaintenanceinfo/insert',
                    updateURL: '/api/adscm/operation/jqwbMachinemaintenanceinfo/update',
                },
                isNotesRecordDialog: false,
                dialogNotesRecordTitle: '',
                dialogNotesRecordList:{
                    content: '',
                    id: '',
                    object: '',
                    person: '',
                    personName: '',
                    tid: '',
                    time: '',
                    type: '',
                },
                notesRecordData:[],
            };
        },
        created() {
            this.getData();
            this.getMaterialManagersData();
        },
        methods: {
            getMaterialManagersData() {
                let _this = this;
                this.$http({
                    url: '/api/adscm/operation/jqcpMachineproduct/selectTaskPerformPerson?tokenId='+_this.tokenId,
                    method: 'post',
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                }).then(function (res) {
                    if (res.data.statusCode == 200) {
                        _this.materialManagers = res.data.content;
                    } else {
                        _this.$message.error(res.data.desc);
                    }
                }).catch(function (catchres) {
                    _this.$message.error("加载失败！请重新加载...");
                })
            },
            getData() {
                let _this = this;
                let loading = this.$loading({
                    target: document.querySelector(".wrapper > .content-box"),
                    lock: true,
                    text: '正在努力加载中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.8)'
                });
               this.$http({
                    url: '/api/adscm/operation/jqwbMachinemaintenance/selectjqwbMachinemaintenance?tokenId=' + _this.tokenId,
                    method: 'post',
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                }).then(function (res) {
                    if (res.data.statusCode == 200) {
                        _this.dataList = res.data.content;
                        loading.close();
                    } else {
                        _this.$message.error(res.data.desc);
                        loading.close();
                    }
                }).catch(function (catchres) {
                    _this.$message.error("加载失败！请重新加载...");
                   loading.close();
                })
            },
            updateList(row) {
                this.isDialog = true;
                this.activeName = '1';
                this.dialogList = row;
            },
            submitList(){
                let _this = this;
                _this.dialogList.machineoutfactorytime = _this.timestampToTime( _this.dialogList.machineoutfactorytime);
                _this.dialogList.machinestartusetime = _this.timestampToTime( _this.dialogList.machinestartusetime);
                this.$http({
                    url: '/api/adscm/operation/jqwbMachinemaintenance/update?tokenId='+_this.tokenId,
                    method: 'post',
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                    data:_this.dialogList,
                }).then(function (res) {
                    if (res.data.statusCode == 200) {
                        _this.isDialog = false;
                    } else {
                        _this.$message.error(res.data.desc);
                    }
                }).catch(function (catchres) {
                    _this.$message.error("加载失败！请重新加载...");
                })
            },

            //过程状态信息
            getCustomerData()  {
                let _this = this;
                this.$http({
                    url: '/api/adscm/operation/jqcpMachineproductdetail/queryCustomer?tokenId=' + _this.tokenId,
                    method: 'post',
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                }).then(function (res) {
                    if (res.data.statusCode == 200) {
                        _this.customerData = res.data.content;
                    } else {
                        _this.$message.error(res.data.desc);
                    }
                }).catch(function (catchres) {
                    _this.$message.error("加载失败！请重新加载...");
                })
            },
            getProcessStateData()  {
                let _this = this;
                this.$http({
                    url: '/api/adscm/operation/jqwbMachinemaintenancedetail/selectByTid/'+_this.dialogList.tid+'?tokenId=' + _this.tokenId,
                    method: 'post',
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                }).then(function (res) {
                    if (res.data.statusCode == 200) {
                        _this.processStateData = res.data.content;
                        _this.getCustomerData();
                    } else {
                        _this.$message.error(res.data.desc);
                    }
                }).catch(function (catchres) {
                    _this.$message.error("加载失败！请重新加载...");
                })
            },
            insertProcessStateList(){
                this.isProcessStateDialog = true;
                this.dialogProcessStateTitle = '添加';
                this.dialogProcessStateList={
                    armcode: '',
                    confirmrepairer: '',
                    createtime: '',
                    did: '',
                    faultdescription: '',
                    faultpartsname: '',
                    faulttype: '',
                    guiderepairer: '',
                    machinecollectionnums: '',
                    operator: '',
                    performrepairer: '',
                    qrcode1: '',
                    qrcode2: '',
                    qrcode3: '',
                    repaircreatetime: '',
                    repairendtime: '',
                    repairer: '',
                    repairerName: '',
                    repairstarttime: '',
                    repairtime: '',
                    replaceparts1: '',
                    replaceparts2: '',
                    replaceparts3: '',
                    stmcode: '',
                    tid: this.dialogList.tid,
                };
            },
            updateProcessStateList(row) {
                this.isProcessStateDialog = true;
                this.dialogProcessStateTitle = '编辑';
                this.dialogProcessStateList = row;
            },
            submitProcessStateList(){
                let _this = this;
                let url;
                if (_this.dialogProcessStateTitle==='添加') {
                    url = '/api/adscm/operation/jqwbMachinemaintenancedetail/insert?tokenId='+_this.tokenId;
                } else if (_this.dialogProcessStateTitle==='编辑') {
                    url = '/api/adscm/operation/jqwbMachinemaintenancedetail/update?tokenId='+_this.tokenId;
                }
                _this.dialogProcessStateList.repairtime = this.timestampToTime(_this.dialogProcessStateList.repairtime);
                _this.dialogProcessStateList.repairstarttime = this.timestampToTime(_this.dialogProcessStateList.repairstarttime);
                _this.dialogProcessStateList.repairendtime = this.timestampToTime(_this.dialogProcessStateList.repairendtime);


                this.$http({
                    url: url,
                    method: 'post',
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                    data:_this.dialogProcessStateList,
                }).then(function (res) {
                    if (res.data.statusCode == 200) {
                        _this.isProcessStateDialog = false;
                        if (_this.dialogProcessStateTitle==='添加') _this.getProcessStateData();
                            } else {
                        _this.$message.error(res.data.desc);
                    }
                }).catch(function (catchres) {
                    _this.$message.error("加载失败！请重新加载...");
                })
            },

            //备注记录信息
            getNotesRecordData() {
                let _this = this;
                this.$http({
                    url: _this.dialogNotesRecordURL.getURL + _this.dialogList.tid + '?tokenId=' + _this.tokenId,
                    method: 'post',
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                }).then(function (res) {
                    if (res.data.statusCode == 200) {
                        _this.notesRecordData = res.data.content;
                    } else {
                        _this.$message.error(res.data.desc);
                    }
                }).catch(function (catchres) {
                    _this.$message.error("加载失败！请重新加载...");
                })
            },
            insertNotesRecordList() {
                this.isNotesRecordDialog = true;
                this.dialogNotesRecordTitle = '添加';
                this.dialogNotesRecordList = {
                    content: '',
                    id: '',
                    object: '',
                    person: '',
                    personName: '',
                    time: '',
                    type: '',
                    tid: this.dialogList.tid,
                };
            },
            updateNotesRecordList(row) {
                this.isNotesRecordDialog = true;
                this.dialogNotesRecordTitle = '编辑';
                this.dialogNotesRecordList = row;
            },
            submitNotesRecordList() {
                let _this = this;
                let url;
                if (_this.dialogNotesRecordTitle === '添加') {
                    url = _this.dialogNotesRecordURL.insertURL + '?tokenId=' + _this.tokenId;
                } else if (_this.dialogNotesRecordTitle === '编辑') {
                    url = _this.dialogNotesRecordURL.updateURL + '?tokenId=' + _this.tokenId;
                }
                this.$http({
                    url: url,
                    method: 'post',
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                    data: _this.dialogNotesRecordList,
                }).then(function (res) {
                    if (res.data.statusCode == 200) {
                        _this.isNotesRecordDialog = false;
                        if (_this.dialogNotesRecordTitle === '添加') _this.getNotesRecordData();
                    } else {
                        _this.$message.error(res.data.desc);
                    }
                }).catch(function (catchres) {
                    _this.$message.error("加载失败！请重新加载...");
                })
            },


            handleClick(tab, event) {
                if(tab.name==='2'){
                    this.getProcessStateData();
                } else if(tab.name==='3'){
                    this.getNotesRecordData();
                }

            },
            handleSizeChange: function (size) {
                this.pagesize = size;
            },
            handleCurrentChange: function (currentPage) {
                this.currentPage = currentPage;
            },
            timestampToTime(timestamp) {
                if (timestamp) {
                    let date = new Date(timestamp);
                    let Y = date.getFullYear() + '-';
                    let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                    let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + " ";
                    let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ":";
                    let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ":";
                    return timestamp ? Y + M + D + h + m + '00' : '';
                } else {
                    return '';
                }
            },
        }
    }
</script>

<style scoped>

    #parts .el-table--small {
        font-size: 13px;
    }

    #parts .el-table .cell,
    #parts .el-table th div {
        padding-left: 0;
        padding-right: 0;
    }

    #parts .el-tab-pane.dialog1 .el-form{
        margin-bottom: 30px;
    }

</style>
